<!-- 增加或者编辑视点操作动作弹窗 -->
<template>
  <a-modal
    :title="(!layerName?'添加':'编辑')+'附加功能'"
    :visible="visible"
    @ok="checkIsEdit"
    @cancel="$emit('close')"
    okText="确认"
    cancelText="取消"
    :mask="false"
  >
    <a-form>
      <a-form-item
        label="动作列表"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
      >
        <el-select size="small"  v-model="actionType">
          <el-option value="showLayer">打开图层</el-option>
          <el-option value="closeLayer">关闭图层</el-option>
        </el-select>
      </a-form-item>
      <a-form-item
        label="所执行对象"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
      >
        <el-select size="small"  placeholder="请选择图层名称" v-model="layerName">
          <el-option
            v-for="item in layerTreeList"
            :value="item.nameCn"
            :key="item.nameCn"
          >
            {{ item.nameCn }}
          </el-option>
        </el-select>
      </a-form-item>
      <a-form-item
        label="颜色填充"
        v-show="this.actionType == 'showLayer'"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
      >
        <el-color-picker
          v-model="color"
          show-alpha
          color-format="rgb"
        ></el-color-picker>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //要编辑的元素，如果有就是编辑状态，没有就是添加
    editingAction: {
      type: Object,
      default() {
        return undefined;
      },
    },
  },
  data() {
    return {
      layerTreeList: Object.values(CIM.layerTree._layerTreeData), //图层树的列表
      actionType: "showLayer", //要打开图层showLayer还是关闭图层closeLayer
      layerName: undefined, //要操作的图层名称
      color: "rgba(255,255,255,1)",
    };
  },
  created() {},
  mounted() {},
  destroyed() {},
  computed: {},
  watch: {
    visible() {
      //打开和关闭时重置
      this.actionType = "showLayer";
      this.color = "rgba(255,255,255,1)";
      this.layerName = this.layerTreeList[0]
        ? this.layerTreeList[0].nameCn
        : undefined;
    },
    editingAction(nv) {
      if (nv) {
        this.actionType = nv.action;
        this.layerName = nv.obj;
        this.color = nv.color;
      }
    },
  },
  methods: {
    /**
     * @lastUpdateBy : 张瀚
     * @description: 判断是编辑还是添加
     */
    checkIsEdit() {
      if (this.editingAction) {
        this.editAction();
      } else {
        this.addAction();
      }
    },
    /**
     * @lastUpdateBy : 张瀚
     * @description: 添加动作
     */
    addAction() {
      if (this.layerName == undefined || this.layerName.length == 0) {
        this.$message.warn("请选择图层！");
        return;
      }
      this.$emit("addAction", {
        action: this.actionType,
        obj: this.layerName,
        //这个参数其实不需要了，color里面带了透明度了
        params: 1,
        color: this.color,
      });
      this.$emit("close");
    },
    editAction() {
      if (this.layerName == undefined || this.layerName.length == 0) {
        this.$message.warn("请选择图层！");
        return;
      }
      this.$emit("editAction", {
        action: this.actionType,
        obj: this.layerName,
        //这个参数其实不需要了，color里面带了透明度了
        params: 1,
        color: this.color,
      });
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>

</style>
